<template>
  <div class="section section-base">
    <div class="flex-start font30" style="padding-top: 20px;">
      <count-to :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
      <div>次</div>
    </div>
    <div class="font16" id="fireSystemDes">全年电瓶车上楼报警总次数为{{dataCount}}次</div>
    <animation-text :text="animationText"></animation-text>
    <div ref="chartWrap" style="margin-top:20px;height:300px;"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataCount: 0,
      animationText: '',
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      let data = this.reportData.dpcInfo
      this.dataCount = data.alarmTotal
      this.animationText = `截止到年末，系统通过${data.fcfSize}路摄像头为您提供了累计${data.serverTime}小时的AI守护，累计数据超过${data.dataTotal}条。`
      this.drawChart()
    },
    drawChart() {
      let dataList = this.reportData.dpcInfo.monthCount
      let lineData1 = []
      let myChartLine = echarts.init(this.$refs.chartWrap)
      let categoryDataY = dataList.map((item) => {
        return item.total
      })
      let maxItem = Math.max(...categoryDataY)
      let minItem = Math.min(...categoryDataY)
      let categoryDataX = dataList.map((item, index, arr) => {
        if (index == arr.length - 1 || arr.length == 1) {
          return item.month + '月'
        } else {
          return item.month
        }
      })
      for (var i = 0; i < dataList.length; i++) {
        lineData1.push(maxItem + 1)
      }

      // option
      let option = {
        title: {
          show: false,
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#333',
            },
          },
        },
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
        },
        xAxis: {
          data: categoryDataX,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            interval: 0,
            fontSize: 12,
            color: 'white',
          },
        },
        yAxis: {
          show: false,
          splitLine: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            },
          },
        },
        series: [
          {
            name: 'bar',
            type: 'bar',
            barGap: '-100%',
            barWidth: 8,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#6DFFF0' },
                  { offset: 1, color: '#7DE5FF' },
                ]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#FFF66A',
                    fontSize: 10,
                  },
                },
              },
            },
            data: categoryDataY,
          },
        ],
      }
      myChartLine.clear()
      myChartLine.setOption(option)
    },
  },
  mounted() {},
}
</script>